<template>
  <div class="layout_addprogram">
    <div class="row check_num">
      <label>医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：</label>
      <input type="text" v-model="hospital" maxlength="10" disabled />
    </div>
    <div class="row">
      <Icon type="ios-arrow-right" class="select-icon"></Icon>
      <label for>项 目 分 类：</label>
      <cube-select
        v-model="project_type"
        :options="project_type_arr"
        placeholder="请选择项目类别"
        @change="change_project_type"
      ></cube-select>
    </div>
    <div class="row">
      <Icon type="ios-arrow-right" class="select-icon"></Icon>
      <label for>项 目 名 称：</label>
      <cube-select
        v-model="project_id"
        @change="change_project"
        disabled
        :options="option_program"
        placeholder="请选择项目名称"
      ></cube-select>
    </div>
    <div class="row" v-if="is_other">
      <label>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="text" v-model="project_name" maxlength="20" placeholder="请输入项目名称" />
    </div>
    <div class="row">
      <Icon type="ios-arrow-right" class="select-icon"></Icon>
      <label for>手 术 医 生：</label>
      <cube-select v-model="doc_name" :options="doc_arr" placeholder="请选择手术医生"></cube-select>
    </div>
    <!-- <div class="row">
      <Icon type="ios-arrow-right" class="select-icon"></Icon>
      <label for="">医&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 院：</label>
      <cube-select v-model="hospital" :options="option_hospital" placeholder="请选择医院" @change="changeHospital"></cube-select>
    </div>
    <div class="row">
      <Icon type="ios-arrow-right" class="select-icon"></Icon>
      <label for="">项 目 名 称：</label>
      <cube-select v-model="programName" :options="option_program" :placeholder="option_hospital.length==0||hospital==''?'请先选择医院':'请选择项目'" :disabled="option_hospital.length==0||hospital==''?true:false "></cube-select>
    </div>-->
    <cube-button @click="showDatePicker">
      手 术 时 间 ：
      <span v-text="billDate"></span>
    </cube-button>
    <div class="row cost">
      <label>补 贴 金 额 ：</label>
      <input type="tel" v-model="progarmAmount" disabled @change="change_money()" maxlength="10" />
      <!-- <p class="tip">注：扣除成本的金额=总金额-成本</p> -->
    </div>
    <div class="gray"></div>
    <div class="uploadMoudle">
      <p>上传消费凭证（最多上传9张）：</p>
      <cube-upload
        :action="action"
        :max="9"
        @files-added="filesAddedOrder"
        @file-success="fileSuccessOrder"
      />
    </div>
    <div class="gray"></div>
    <div class="uploadMoudle">
      <p>上传手术照片（至少上传2张）：</p>
      <cube-upload :action="action" :max="9" @files-added="filesAdded" @file-success="fileSuccess" />
    </div>
    <div class="gray"></div>
    <div class="note">
      <div>备注:</div>
      <cube-textarea v-model="value" placeholder :maxlength="255"></cube-textarea>
    </div>
    <button @click="createdBill()" :disabled="isdisabledBtn">提交</button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/api'
let timer;
export default {
  data () {
    return {
      hospital: "",
      programName: "",
      option_program: [],
      billDate: "", //手术日期
      progarmAmount: "",
      introduction: "",
      pickerVisible: "", //选择器
      operationAmount: "",
      // selected: "", //是否首单
      options: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ],
      value: "",
      placeholder: "",
      action: {
        // 正式服
        target: "https://act.yuepinyuemei.com/api/upload/img",
        data: {
          dirPath: "order"
        }
      },
      photo4: [], //消费凭证
      photo5: [], //对比照
      str4: "",
      str5: "",
      order_sn: "",
      cardTime: "",
      isdisabledBtn: false,
      isopen: false,
      credit: "",
      pay_num: "",
      btn_msg: "获取验证码",
      num: 60,
      credit_all: "",
      project_type_arr: [],
      project_type: "",
      project_id: "",
      project_name: "",
      doc_name: "",
      is_other: false,
      doc_arr: [],
      order_data: {}
    };
  },
  created () {
    document.title = "添加项目"
    this.order_sn = location.hash.split(':')[1]
    this.credit_all = sessionStorage.getItem("user_credit");
    this.hospital = sessionStorage.getItem("hospital_id");
    this.get_project_list();
    this.get_program();
    this.get_doctor()
    this.get_order_data()
  },
  methods: {
    change_project () {
      this.project_name = "";
      this.option_program.forEach(item => {
        if (item.id == this.project_id) {
          if (item.name.includes("其他")) {
            this.is_other = true;
          } else {
            this.is_other = false;
            this.project_name = item.name;
          }
        }
      });
    },
    get_project_list () {
      let loading = this.loading("加载中", 60000);
      loading.show();
      this.axios
        .post("api/butler/project/type")
        .then(msg => {
          loading.hide();
          if (msg.data.code == 200) {
            let arr = msg.data.data;
            arr.forEach(el => {
              el.value = el.id;
              el.text = el.name;
            });
            this.project_type_arr = arr;
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(error => {
          console.log(error);
          Toast({
            message: "请求错误，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    change_project_type () { },
    change_money () {
      this.credit =
        this.progarmAmount - 0 < this.credit_all - 0
          ? this.progarmAmount - 0
          : this.credit_all - 0;
      this.pay_num = this.progarmAmount - 0 - this.credit;
    },
    get_program () {
      let loading = this.loading("加载中", 60000);
      loading.show();
      this.axios
        .post("api/butler/getProject", {
          hospital: this.hospital
        })
        .then(msg => {
          loading.hide();
          if (msg.data.code == 200) {
            var arr = msg.data.data;
            if (arr.length > 0) {
              arr.forEach(el => {
                el.value = el.id;
                el.text = el.name;
              });
              this.option_program = arr;
              this.other_id = arr[arr.length - 1].id;
            } else {
              Toast({
                message: "该医院暂无项目",
                position: "bottom",
                duration: 2000
              });
            }
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(error => {
          console.log(error);

          Toast({
            message: "请求错误，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: "日期",
          min: new Date(
            new Date().getFullYear(),
            new Date().getMonth() - 2,
            new Date().getDate()
          ),
          max: new Date(new Date().getFullYear(), 11, 31),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        });
      }
      this.datePicker.show();
    },
    selectHandle (date, selectedVal, selectedText) {
      this.billDate = selectedText.join("-");
    },
    isFirstSelect (text) { },
    filesAddedOrder (files) {
      //消费凭证
      let hasIgnore = false;
      const maxSize = 20 * 1024 * 1024; // 20M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "图片上传失败，不能大于20M"
        }).show();
    },
    fileSuccessOrder (file) {
      this.str4 += file.response.data.url + "#";
    },
    filesAdded (files) {
      //对比照
      this.photo5 = files;
      let hasIgnore = false;
      const maxSize = 20 * 1024 * 1024; // 2M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 3000,
          txt: "图片上传失败，不能大于20M"
        }).show();
    },
    fileSuccess (file) {
      this.str5 += file.response.data.url + "#";
    },
    addTextarea (e) { },
    createdBill (e) {
      this.order_sn = location.hash.split(":")[1];
      if (this.project_type == "") {
        Toast({
          message: "请选择项目分类",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else
        if (this.doc_name == "") {
          Toast({
            message: "请填写医生名称",
            position: "bottom",
            duration: 2000
          });
          return false;
        }
        else if (this.billDate == "") {
          Toast({
            message: "请选择手术时间",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else if (this.str4 == "") {
          Toast({
            message: "请上传消费凭证",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else if (this.str4.split("#")[0] == "undefined") {
          Toast({
            message: "请重新上传消费凭证",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else if (this.str5.split("#").length < 3) {
          Toast({
            message: "手术照片至少上传两张",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else if (this.str5.split("#")[0] == "undefined") {
          Toast({
            message: "请重新上传手术照片",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else if (this.value == "") {
          Toast({
            message: "请填写备注",
            position: "bottom",
            duration: 2000
          });
          return false;
        } else {
          this.isdisabledBtn = true;
          let load = this.loading("加载中");
          load.show();
          this.axios
            .post("/api/butler/apply_add", {
              order_sn: this.order_sn,
              project_type_id: this.project_type,
              project_id: this.project_id,
              project_name: "",
              operation_time: this.billDate,
              money: this.progarmAmount - 0,
              img4: this.str4, //消费凭证
              img5: this.str5, //手术前后照
              remark: this.value,
              doctor_id: this.doc_name
            })
            .then(msg => {
              this.isdisabledBtn = false;
              if (msg.data.code == 200) {
                Toast({
                  message: msg.data.msg,
                  position: "bottom",
                  duration: 2000
                });
                this.$router.go(-1);
              } else if (msg.data.code == 250) {
                Toast({
                  message: "登录过期，请重新登陆",
                  position: "bottom",
                  duration: 2000
                });
                this.$router.push("/login");
                return false;
              } else {
                Toast({
                  message: msg.data.msg,
                  position: "bottom",
                  duration: 2000
                });
              }
              load.hide();
            })
            .catch(error => {
              console.log(error);
              load.hide();
              this.isdisabledBtn = false;
              Toast({
                message: "请求失败，请稍后重试",
                position: "bottom",
                duration: 2000
              });
            });
        }
    },
    selectTime (date, selectedVal, selectedText) {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.$createDatePicker({
          title: "请选择刷卡时间",
          min: new Date(2018, 1, 1, 0, 0, 0),
          max: new Date(2050, 12, 31, 24, 24, 24),
          value: new Date(),
          columnCount: 6,
          onSelect: (date, selectedVal, selectedText) => {
            let timeArr = selectedVal,
              tostring;
            timeArr[1] = timeArr[1] - 0 < 0 ? "0" + timeArr[1] : timeArr[1];
            timeArr[2] = timeArr[2] < 0 ? "0" + timeArr[2] : timeArr[2];
            timeArr[3] = timeArr[3] < 0 ? "0" + timeArr[3] : timeArr[3];
            timeArr[4] = timeArr[4] < 0 ? "0" + timeArr[4] : timeArr[4];
            timeArr[5] = timeArr[5] < 0 ? "0" + timeArr[5] : timeArr[5];
            tostring =
              timeArr[0] +
              "-" +
              timeArr[1] +
              "-" +
              timeArr[2] +
              " " +
              timeArr[3] +
              ":" +
              timeArr[4] +
              ":" +
              timeArr[5];
            this.cardTime = tostring;
          },
          onCancel: this.cancelTime
        });
      }
      this.dateTimePicker.show();
    },
    cancelTime () {
      this.cardTime = "";
    },
    get_doctor () {
      this.axios.post('api/butler/doctor/list', {
        hospital: this.hospital
      }).then((result) => {
        let res = result.data
        if (res.code == 200) {
          let arr = res.data.doctors || []
          arr.forEach(item => {
            item.text = item.name
            item.value = item.id
          });
          this.doc_arr = arr
        } else {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 2000
          });
        }

      }).catch((err) => {
        console.log(err);
        Toast({
          message: "服务器出错啦",
          position: "bottom",
          duration: 2000
        });
      });
    },
    change_doctor () {

    },
    get_order_data () {
      this.axios.post('api/butler/apply/fullitem', {
        order_sn: this.order_sn
      }).then((result) => {
        let res = result.data
        if (res.code == 200) {
          let order_data = res.data.item
          this.hospital = order_data.hospital_name
          this.project_id = order_data.project_id
          this.progarmAmount = order_data.project_allprice
        } else {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 2000
          });
        }
      }).catch((err) => {
        Toast({
          message: "请求失败，请稍后重试",
          position: "bottom",
          duration: 2000
        });
      });
    }
  }
};
</script>





<style scoped lang="less">
.layout_addprogram {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 17px;
  color: #666;
  text-align: center;
  margin: 0 auto;
  /* background:rgba(204,204,204,.2018); */
}

.isFinis {
  height: 48px;
  width: 100%;
  line-height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding-left: 15px;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.uploadMoudle {
  margin-top: 10px;
  background-color: #fff;
  padding: 13px 15px;
}
.uploadMoudle p {
  font-size: 16px;
  text-align: left;
  margin-bottom: 13px;
}

.isFirstSelect {
  height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  display: flex;
  background-color: #fff;
  padding-left: 15px;
}
.isFirstSelect label {
  height: 48px;
  line-height: 48px;
}

.note {
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding: 0 15px;
  font-size: 17px;
  color: #666;
  margin-top: 10px;
}

.row {
  min-height: 48px;
  line-height: 48px;
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding-left: 15px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  position: relative;
  display: flex;
}

.row input {
  height: 46px;
  margin-bottom: 2px;
  background-color: #fff;
  font-size: 17px;
  padding-left: 10px;
}

.gray {
  width: 100%;
  height: 10px;
  background: rgba(204, 204, 204, 0.2018);
}
.cube-btn {
  height: 48px !important;
  min-width: 70% !important;
  background: #fff !important;
  color: #666 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding: 17px 15px !important;
  float: left;
}
.cube-radio {
  display: inline-block !important;
}
.cube-radio-group {
  display: flex !important;
}
.cube-radio_selected .cube-radio-ui {
  background-color: #d8d8d8 !important;
}
.mint-field:nth-last-of-type(1) {
  border-bottom: none !important;
}

.cube-textarea::placeholder {
  color: #fff !important;
}
.cube-select::after {
  border: 0 !important;
}
.cube-select {
  width: 71% !important;
  line-height: 1.9 !important;
}
.cube-picker-confirm {
  color: #999;
}
</style>

<style lang="less">
.layout_addprogram {
  .cube-select-icon {
    display: none !important;
  }
  .select-icon {
    display: block;
    font-size: 20px;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99;
  }
  .time-btn {
    width: 50%;
  }
  .cube-textarea-wrapper,
  .cube-textarea {
    min-height: 120px !important;
    border-color: rgba(204, 204, 204, 1);
  }
  .cost {
    display: inline-block;
    .tip {
      color: #ccc;
      margin-top: -25px;
    }
  }
  .credit {
    .cube-switch {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    .cube-switch .cube-switch-input:checked + .cube-switch-ui {
      background-color: #09bb07;
      border-color: #09bb07;
    }
  }
  .check_num {
    .get-msg {
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  ::placeholder,
  .cube-select-placeholder {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
  }
}
</style>

